<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>music plug-in</title>


    <style>
        *{
          margin:0px;
          padding:0px;
          font-family: "Microsoft YaHei";
        }
        footer{
          text-align: center;
          font-size: 10px;
          color: #cacaca;
          border-top:1px solid #9d9d9d;
          padding-top: 2px;
        }
        footer>a {
          color: #cacaca;
          text-decoration: none;
        }
    </style>
    <link rel="stylesheet" href="css/section1.css"/>
    <link rel="stylesheet" href="css/section2.css"/>
    <link rel="stylesheet" href="css/animation.css"/>
</head>
<body>
  <div id="background-blur"></div>
  <div id="content">
    <!--唱片部分-->
    <section>
        <div id="pic">
            <!--<div id="disk"><div></div></div>-->
        </div>
        <div id="setting">
            <div class="cover">
              <div ></div>
              <p id="title"><span class="songInfo">告白气球</span><span class="songInfo">周杰伦</span></p>
            </div>
            <div id="controlArea">
                <div class="controls progressBar"><div title="hello" data-modifiable="true"><span class="barEnd"></span></div></div>
                <span class="controls icons last"></span>
                <span class="controls icons playBt toPlay"></span>
                <span class="controls icons next"></span>
                <span class="controls icons volume"></span>
                <div class="controls progressBar volumeBar"><div title="hello"><span class="barEnd"></span></div></div>
                <span class="controls icons topList"></span>
            </div>
        </div>
    </section>

    <!--列表部分-->
    <section>
        <div id="choice">
          <span class="chosen"><span id="topList" class="icons topList"></span></span>
          <!--<input type="text" id="search"/>-->
          <span><input type="text" id="searchResult" class="searchHidden"/><span class="icons search searchResult"></span></span>
          <span><span id="playList" class="icons playList"></span></span>
          <span><span id="collections" class="icons collect collections"></span></span>
        </div>
        <div id="listWrapper">
          <ul>
          </ul>
          <div id="listBottom">loading . . .</div>
        </div>
      <footer>Software &copy; <a href="https://git.oschina.net/huangmx">Star</a>&nbsp; | &nbsp;Music &copy <a href="https://y.qq.com/">Tencent</a></footer>
    </section>

  </div>
  <script src="js/frontHandler.js"></script>
  <script src="js/eventBinding.js"></script>
  <script src="js/UIManager.js"></script>
</body>
</html>